<template>
  <a-list
    :dataSource="bindingList"
    itemLayout="horizontal"
    size="large"
    style="padding-right: 100px"
  >
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a-list-item-meta :description="item.action ? item.bindingdescription : item.description">
        <a-avatar :src="item.avatar" shape="square" size="large" slot="avatar"/>
        <a slot="title">{{ item.title }}</a>
      </a-list-item-meta>
      <div slot="actions">
        <a @click="handleBinding(item.type)" slot="actions" v-show="!item.action">绑定</a>
        <a slot="actions" style="color: red" v-show="item.action">解绑</a>
      </div>
    </a-list-item>
  </a-list>
</template>

<script>
import { openWindow } from '@/utils/util'
import { binding } from '@api/sys/user'

export default {
  data () {
    return {
      binding: {
        wechat: false,
        gitee: false,
        tencent: false,
        osc: false
      }
    }
  },
  created () {
    binding().then(res => {
      this.binding = Object.assign({}, this.binding, res.data)
      console.log(this.binding, 'binding')
    })
  },
  computed: {
    bindingList: function () {
      return [
        {
          title: '微信',
          type: 'wechat',
          action: this.binding.wechat,
          description: '当前未绑定微信账号',
          bindingdescription: '已绑定微信账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        },
        {
          title: '码云',
          type: 'gitee',
          action: this.binding.gitee,
          description: '当前未绑定码云账号',
          bindingdescription: '已绑定码云账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        },
        {
          title: 'QQ',
          type: 'tencent',
          action: this.binding.tencent,
          description: '当前未绑定腾讯QQ账号',
          bindingdescription: '已绑定腾讯QQ账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        },
        {
          title: '开源中国',
          type: 'osc',
          action: this.binding.osc,
          description: '当前未绑定开源中国账号',
          bindingdescription: '已绑定开源中国账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        },
        {
          title: '钉钉',
          type: 'ding',
          action: this.binding.ding,
          description: '当前未绑定钉钉账号',
          bindingdescription: '已绑定钉钉账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        },
        {
          title: '企业微信',
          type: 'wework',
          action: this.binding.wework,
          description: '当前未绑定企业微信账号',
          bindingdescription: '已绑定企业微信账号',
          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png'
        }
      ]
    }
  },
  methods: {
    handleBinding (thirdpart) {
      let appid, client_id, redirect_uri, url
      redirect_uri = encodeURIComponent(window.location.origin + '/authredirect')
      if (thirdpart === 'wechat') {
        appid = 'wxd1678d3f83b1d83a'
        url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&state=WX-BIND&response_type=code&scope=snsapi_login#wechat_redirect'
      } else if (thirdpart === 'tencent') {
        client_id = '101322838'
        url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&state=QQ-BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
      } else if (thirdpart === 'gitee') {
        client_id = 'bc3b49fdcde3aec5dab82af25f168e1bd4c190694cb8d72fd72a282539a37535'
        url = 'https://gitee.com/oauth/authorize?response_type=code&state=GITEE--BIND&client_id=' + client_id + '&redirect_uri=' + redirect_uri
      } else if (thirdpart === 'osc') {
        client_id = 'neIIqlwGsjsfsA6uxNqD'
        url = 'https://www.oschina.net/action/oauth2/authorize?response_type=code&client_id=' + client_id + '&state=OSC-BIND&redirect_uri=' + redirect_uri
      } else if (thirdpart === 'ding') {
        client_id = 'dingoa8xagn3o06b2qjzgc'
        url = 'https://oapi.dingtalk.com/connect/qrconnect?response_type=code&appid=' + client_id + '&state=DING-BIND&redirect_uri=' + redirect_uri + '&scope=snsapi_login'
      } else if(thirdpart === 'wework') {
        client_id = 'ww6afb8c4a10c4ec39'
        const agentId = '1000003'
        // url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${client_id}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=WEWORK-LOGIN#wechat_redirect`
        url = `https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=${client_id}&agentid=${agentId}&redirect_uri=${redirect_uri}&state=WEWORK-BIND`
      }
      openWindow(url, thirdpart, 540, 540)
    }
  }
}
</script>

<style scoped>

</style>
